<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'级别筛选详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" >
        <!-- <div class="analyItem">
            <p class="analyItemTit tx-center">搜索</p>
            <div class="analyItemCon">
                 <p class="col-md-2">
                  项目金额：
                </p>
                <p class="col-md-5">
                   <el-input placeholder="请输入项目金额" @keyup.enter.native="getManagerByContract" v-model="money"></el-input>
                </p>
            </div>
        </div> -->
        <div class="" style="width: 100%" v-scrollHeight = "30">
        <table class="levelTable">
          <thead>
            <tr>
                <th width="8%">序号</th>
                <th width="10%">姓名</th>
                <th width="8%">类型</th>
                <th width="8%">级别</th>
                <th width="14%">在施额/万</th>
                <th width="8%">地区</th>
                <th width="8%">投诉</th>
                <th width="8%">未接天数</th>
                <th width="8%">入职月数</th>
                <th width="8%">接单</th>
                <th width="12%">在施区</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in  contractUser" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.user_name}}</td>
              <td>{{item.projectTypeName}}</td>
              <td>{{item.tradition_level}}</td>
              <td>{{item.publishMoney}}</td>
              <td>{{item.areaName}}</td>
              <td>{{item.complaintRate}}</td>
              <td>{{item.recentTime}}</td>
              <td>{{item.seniority}}</td>
              <td>{{item.recentNum}}</td>
              <td>{{item.subareaName}}</td>
            </tr>
          </tbody>
        </table>
        </div>

    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findManagerByContractAmount } from '../../Resources/Api/index'

export default {
    data () {
        return {
            money: 0,
            mon: {},
            contractUser: []
        }
    },
    created () {
        this.getManagerByContract()
        // if (this.twoToThreeInfo.money === undefined || this.twoToThreeInfo.money === '' || this.twoToThreeInfo.money === 0) {
        //     this.money = 0
        // } else {
        //     this.money = this.twoToThreeInfo.money
        //     this.getManagerByContract()
        // }
    },
    methods: {
        // ...mapMutations({
        //     setLeftData: `SET_TWO_TO_THREE_INFO`
        // }),
        getManagerByContract () {
            this.mon = {'money': this.money}
            // this.setLeftData(this.mon)
            let _this = this
            _this.contractUser = []
            findManagerByContractAmount({
                areaId: this.leftInfo.cityId,
                projectMoney: this.twoToThreeInfo.moneyValue !== '' ? Number(this.twoToThreeInfo.moneyValue) : 0,
                projectType: this.twoToThreeInfo.typeValue !== '' ? Number(this.twoToThreeInfo.typeValue) : 0
            }).then(result => {
                this.contractUser = result.data.Body
            })
        }
    },
    computed: {
        ...mapGetters(['twoToThreeInfo', 'leftInfo'])
    },
    watch: {
        twoToThreeInfo () {
            console.log('二段值改变')
        },
        $route () {
            this.getManagerByContract()
        }
    }
}
</script>
<style>
.levelTable {
  width: 100%;
     /* height: 450px;
    overflow-y: auto; */
}
/* .levelTable td,
.levelTable th {
    width:calc(100% / 12)
} */
.layerRtb-scroll {
    width: 100%;
    height: 90%;
    padding: 0 10px;
}
</style>
